<template>
    <div class="property-management">
        <!-- 搜索框 -->
        <el-card class="search-card" shadow="hover">
            <el-form :inline="true" :model="keyword" ref="searchForm" class="search-form">
                <el-form-item label="房屋编号:">
                    <el-input size="medium" clearable v-model="keyword.blur" placeholder="输入房屋编号进行搜索">
                    </el-input>
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" size="medium" @click="search" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" plain size="medium" @click="downloadExcel" icon="el-icon-download">导出</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 列表 -->
        <el-card class="table-card" shadow="hover">
            <el-table :data="houseList" style="width: 100%" class="data-table">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="房屋编号" align="center" prop="houseId" />
                <el-table-column label="房屋位置" align="center" prop="houseLocation" />
                <el-table-column label="面积" align="center" prop="area" />
                <el-table-column label="房间数目" align="center" prop="roomNumber" />
                <el-table-column label="业主" align="center" prop="ownerName" />
                <el-table-column label="联系方式" align="center" prop="contactNumber" />
                <el-table-column label="车位" align="center" prop="parkingSpaceNumber" />
                <el-table-column label="房屋购买时间" align="center" prop="purchaseDate" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 分页 -->
        <el-card class="pagination-card" shadow="hover">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[5, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>

        <!-- 修改对话框 -->
        <el-dialog title="修改业主信息" :visible.sync="dialogVisible" width="30%" custom-class="edit-dialog">
            <el-form :model="updateForm" class="edit-form">
                <el-form-item label="业主名字:">
                    <el-input v-model="updateForm.ownerName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式:">
                    <el-input v-model="updateForm.contactNumber" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitUpdate">确认修改</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { propertyPage, updateProperty, deleteProperty } from "@/api/psm/property";

export default {
    data() {
        return {
            currentPage: 1,
            total: 0,
            pageSize: 5,
            pageNum: 1,
            houseList: [],
            keyword: {
                blur: '',
            },
            dialogVisible: false,
            updateForm: {
                houseId: '',
                ownerName: '',
                contactNumber: '',
            },
        };
    },
    methods: {
        fetchData() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                houseId: this.keyword.blur,
            };
            propertyPage(params).then(res => {
                this.total = res.data.total;
                this.houseList = res.data.list;
            });
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchData();
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.fetchData();
        },
        search() {
            this.pageNum = 1; // Reset to first page when searching
            this.fetchData();
        },
        handleUpdate(row) {
            this.updateForm.houseId = row.houseId;
            this.updateForm = { ...row };
            this.dialogVisible = true;
        },
        submitUpdate() {
            updateProperty(this.updateForm).then(response => {
                console.log(response);
                if (response.code === 200) {
                    this.$message.success('修改成功');
                    this.dialogVisible = false;
                    this.fetchData();
                } else {
                    this.$message.error('修改失败');
                }
            });
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteProperty(row.houseId).then(response => {
                    if (response.code === 200) {
                        this.$message.success('删除成功');
                        this.fetchData();
                    } else {
                        this.$message.error('删除失败');
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        downloadExcel() {
      this.$confirm('确定要导出数据吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        // 方案1: 原生js方式发起导出excel请求,后端设置响应格式
        window.location.href = "http://localhost:8081/downloadProperty"
        // 方案1的话后端需要设置响应格式和内容
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出数据！'
        })
      })
    },
    },
    created() {
        this.fetchData();
    },
};
</script>

<style>
.property-management {
    padding: 20px;
    background-color: #f0f2f5;
    min-height: 100vh;
}

.search-card {
    background-color: #ffffff;
    margin-bottom: 20px;
}

.table-card {
    background-color: #ffffff;
    margin-bottom: 20px;
}

.pagination-card {
    background-color: #ffffff;
    margin-top: 20px;
    text-align: right;
}

.search-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-form .el-form-item {
    margin-bottom: 0;
}

.data-table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.data-table th {
    background-color: #409EFF;
    color: #ffffff;
    padding: 10px 0;
}

.data-table td {
    background-color: #ffffff;
    padding: 10px 0;
}

.data-table tr:hover {
    background-color: #ecf5ff;
}

.el-pagination {
    margin-top: 20px;
}

.el-button--primary {
    background-color: #409EFF;
    border-color: #409EFF;
}

.el-button--primary:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
}

.el-card__header {
    background-color: #eef1f6;
    border-bottom: 1px solid #d3dce6;
}

.edit-dialog .el-dialog {
    background-color: #f9f9f9;
}

.edit-form {
    padding: 20px;
}

.edit-form .el-form-item__label {
    color: #333;
}

.edit-form .el-input__inner {
    border-color: #dcdfe6;
}

.edit-form .el-input__inner:focus {
    border-color: #409EFF;
}

.dialog-footer {
    text-align: right;
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #ebeef5;
}
</style>